<template>
  <div class="box">
    <!-- 触发按钮 -->
    <div class="flex-row">
      <button @click="showForm = true" style="color: white;width: 17vw">我要提问</button>
      <div v-if="showForm">
        <!-- 标题输入框 -->
        <input type="text" v-model="formData.title" placeholder="请输入标题" required style="font-weight: bold;">
      </div>
    </div>

    <!-- 表单 -->
    <div class="content" v-if="showForm">
      <form @submit.prevent="submitForm">
        <div class="form-group">
          <div class="flex-row">
            <!-- 图片上传 -->
            <div>
              <label for="imageUpload">上传图片：</label>
              <input type="file" id="imageUpload" @change="onImageChange" ref="imageUpload" accept="image/*" style="border: none">
            </div>

            <!-- 链接输入，移除了required属性 -->
            <div>
              <label for="link">相关链接：</label>
              <input type="url" id="link" v-model="formData.link" placeholder="请输入链接">
            </div>
          </div>
        </div>

        <!-- 内容详情 -->
        <div class="form-group">
          <label for="content">输入内容详情：</label>
          <!-- 增加样式类 .wide-input 以加宽输入框 -->
          <input type="text" id="content" v-model="formData.content" placeholder="输入内容详情~" required class="wide-input">
        </div>

        <!-- 用户名称 -->
        <div class="form-group">
          <label for="name">姓名：</label>
          <input type="text" id="name" v-model="formData.name" placeholder="请输入姓名" required>
        </div>

        <!-- 提交按钮 -->
        <div class="flex-row">
          <button style="color: white">发表</button>
        </div>
      </form>
    </div>

    <!-- 提交结果模板 -->
    <div v-if="submittedData">
      <p style="color: #464545">姓名：{{ submittedData.name }}</p>
      <p>标题：<strong>{{ submittedData.title }}</strong></p> <!-- 使用strong标签加粗标题 -->
      <p>详情：{{ submittedData.content }}</p>
      <p style="color: #676767">提交时间：{{ submittedData.timestamp }}</p>
      <!-- 显示图片预览 -->
      <img v-if="submittedData.image" :src="submittedData.image" alt="Uploaded Image" style="max-width: 200px; max-height: 200px;">
      <button @click="showReplyForm = true">回复</button>

      <!-- 回复区域 -->
      <div>

        <!-- 显示所有回复 -->
        <div v-for="(reply, index) in replies" :key="index">
          <h3>回复内容：</h3>
          <p>姓名：{{ reply.name }}：</p>
          <p>回复内容：{{ reply.content }}</p>
        </div>
      </div>

      <!-- 回复表单 -->
      <div v-if="showReplyForm">
        <form @submit.prevent="submitReply">
          <label for="replyName">姓名：</label>
          <input type="text" id="replyName" v-model="replyName" placeholder="请输入姓名" required>
          <label for="replyContent">回复内容：</label>
          <textarea id="replyContent" v-model="replyContent" placeholder="请输入回复内容" required></textarea>
          <button type="submit">完成</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const replyName = ref('');
const replies = ref([]);
const showReplyForm = ref(false);
const showForm = ref(false);
const formData = ref({
  name: '',
  title: '',
  link: '',
  content: '',
  image: '' // 存储图片的base64编码
});
const submittedData = ref(null);
const imageUpload = ref(null);
const replyContent = ref(''); // 用于存储回复内容的变量

const onImageChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      formData.value.image = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

const submitForm = () => {
  // 使用 toLocaleString 方法获取特定格式的本地时间字符串
  const now = new Date().toLocaleString('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false, // 使用24小时制
  });

  submittedData.value = {
    ...formData.value,
    timestamp: now // 使用toLocaleString格式化后的提交时间
  };
  showForm.value = false;
};

const submitReply = () => {
  if (replyContent.value.trim().length > 0 && replyName.value.trim().length > 0) {
    // 添加回复内容和回复者姓名到 replies 数组
    replies.value.push({ name: replyName.value, content: replyContent.value });

    // 清空回复内容和回复者姓名，并关闭回复表单
    replyContent.value = '';
    replyName.value = '';
    showReplyForm.value = false;
  } else {
    // 可以在这里添加提示，回复内容和姓名不能为空
    alert('请填写回复内容和姓名');
  }
};
</script>

<style>
input{
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 1vw;
  height: 4vh;
  width: 20vw;

}
button{
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background-color: #007bff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin: 1vw;

}
.box {
  margin-left: 15vw;
  margin-top: 5vh;
}

.flex-row {
  display: flex;
  flex-direction: row;


}

.form-group {
  margin-bottom: 1rem;
}
.content{
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 5px;
  width: 50vw;
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;

}
input[placeholder="请输入标题"] {
  font-weight: bold;
}

/* 输入内容详情的input框单独加宽 */
.wide-input {
  width: 90%; /* 可根据需要调整宽度 */
}
p{
  margin: 0;
  padding: 0;
}
/* 其他样式 */
</style>